<template>
  <div class="divBox">
    <div class="left">
      <!-- 饼图 -->
      <div class="home-index-box">
        <el-row :gutter="30">
          <el-col :span="20">
            <div id="home_gathering_source" style="height: 200px; margin:10px 10px; padding: 0px;"></div>
          </el-col>
        </el-row>
      </div>
      <!-- 柱形图 -->
      <div id="testEchart" class="home-index-box"></div>
      <!-- 折线图 -->
      <div id="test" class="home-index-box" style="width:400px;height:240px;margin-left: 0px;"></div>
    </div>
    <!-- 百度地图 -->
    <div class="content">
      <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
        <bm-scale anchor="BMAP_ANCHOR_TOP_CENTER"></bm-scale>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-marker :position="{lng: 111.687450, lat: 40.858330}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"
          @click="infoWindowOpen">
          <bm-traffic :predictDate="{weekday: 7, hour: 12}">
          </bm-traffic>
          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">兴泰青橙部落:服务总人数
            5000+</bm-info-window>
        </bm-marker>
        <bm-marker :position="{lng: 111.699629, lat: 40.831773}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"
          @click="infoWindowOpen1"
          :icon="{url: 'https://s1.aigei.com/src/img/gif/90/903bab28cefe4e7caa4cc4d04804e257.gif?imageMogr2/auto-orient/thumbnail/!89x89r/gravity/Center/crop/89x89/quality/85/%7CimageView2/2/w/89&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:JneCv0RaAfrGzJympgZx7cT5Qk0=', size: {width: 300, height: 157}}">
          <bm-traffic :predictDate="{weekday: 7, hour: 12}">
          </bm-traffic>
          <bm-info-window :show="show1" @close="infoWindowClose1" @open="infoWindowOpen1">光华小区:服务总人数
            2000+</bm-info-window>
        </bm-marker>
        <bm-marker :position="{lng:111.716343,lat:40.802586}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"
          @click="infoWindowOpen3">
          <bm-traffic :predictDate="{weekday: 7, hour: 12}">
          </bm-traffic>
          <bm-info-window :show="show3" @close="infoWindowClose3" @open="infoWindowOpen3">发展小区:服务总人数
            1000+</bm-info-window>
        </bm-marker>
      </baidu-map>
    </div>
  </div>

</template>
<script>
  import { countnum, selectOrder } from "@/api/order/order";
  import { houseType } from '@/api/house/house';
  import * as echarts from "echarts"
  import { getRegCount } from "@/api/servetype/serveType"
  let gatheringSourceOption = {
    title: {
      text: '房产类型占比',
      left: 'left'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 150,
      top: 'center',
      icon: 'circle',
      selectedMode: 'multiple',
      formatter: (name) => { //legend显示数据格式化,每一个 legend 渲染都会回调这个函数
        let data = gatheringSourceOption.series[0].data //获取当前对象的series.data
        let total = 0 //数据对象总和存放
        let tarValue = 0 // 当前对象的value 值
        for (let i = 0, l = data.length; i < l; i++) { //循环饼状图数据对象
          total += data[i].value  //计算出当前对象总和
          if (data[i].name == name) {
            tarValue = data[i].value //存放当前渲染的legend 对象
          }
        }
        let p = (tarValue / total * 100).toFixed(2) //百分比保留小数点后两位
        return `${name}  |  ${p}%  `
      }
    },
    series: [
      {
        name: '房产类型占比',
        type: 'pie',
        radius: '60%',
        center: ['20%', '55%'],
        selectedMode: 'single',
        data: [],
        label: {
          show: false
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  export default {
    name: "Index",
    dicts: ["sys_house_type"],
    data() {
      return {
        xData1: [],
        yData1: [],
        number: 0,
        xData: [],
        yData: [],
        center: { lng: 111.699629, lat: 40.831773 },
        zoom: 15,
        show: false,
        show1: false,
        show3: false,
        total: 0,
        loading: true,
        gatheringSourceOption,
        data0: undefined,
        data1: undefined,
        data2: undefined,
        data3: undefined,
        data4: undefined,
        data5: undefined,
      };
    },
    created() {
      this.setData1();
      this.getTypeNum("0")
      this.getTypeNum("1")
      this.getTypeNum("2")
      this.getTypeNum("3")
      this.getTypeNum("4")
      this.getTypeNum("5")

      this.getList1();
    },
    mounted() {
      this.drawBarl();
      this.drawBar();
    },
    methods: {
      setData1() {
        getRegCount().then(res => {
          for (let i = 0; i < 3; i++) {
            this.yData1 = res.data.map(item => item.number);
            this.drawBarl();
          }
          console.log(this.yData1)
        })
      },
      drawBarl() {
        let mychart1 = this.$echarts.init(
          document.getElementById("test")
        );
        var option = {
          title: {
            text: '服务'
          },
          tooltip: {},
          legend: {
            data: ['人数']
          },
          xAxis: {
            data: ["医疗", '游戏', '其他']
          },
          yAxis: {},
          series: [
            {
              name: '人数',
              type: 'line',
              data: this.yData1
            }
          ]
        };
        mychart1.setOption(option);
      },

      getList1() {
        countnum().then(response => {
          this.total = response.num;
          console.log(this.total);
          const data1 = ["社区服务总数"];
          this.xData = data1;
          this.yData = [this.total];
          this.drawBar(); // 在这里调用 drawBar 方法
        }).catch(error => {
          console.error('Error fetching total orders:', error);
        });
      },
      drawBar() {
        const myChart = this.$echarts.init(
          document.getElementById("testEchart")
        );
        const option = {
          title: {
            text: ''
          },
          tooltip: {},
          legend: {
            data: ['总数']
          },
          xAxis: {
            data: this.xData
          },
          yAxis: {},
          series: [
            {
              name: '总数',
              type: 'bar',
              data: this.yData
            }
          ]
        };
        myChart.setOption(option);
      },
      handler({ BMap, map }) {
        var mapStyle = { style: "midnight" }
        map.setMapStyle(mapStyle);
        this.center.lng = 111.699629;
        this.center.lat = 40.831773;
        this.zoom = 15;
      },
      infoWindowClose() {
        this.show = false;
      },
      infoWindowOpen() {
        this.show = true;
      },
      infoWindowClose1() {
        this.show1 = false;
      },
      infoWindowOpen1() {
        this.show1 = true;
      },
      infoWindowClose3() {
        this.show3 = false;
      },
      infoWindowOpen3() {
        this.show3 = true;
      },
      eChartsInit(domId, theme, opt) {
        echarts.init(document.getElementById(domId), theme).setOption(opt)
        window.addEventListener('resize', () => {
          echarts.init(document.getElementById(domId), theme).resize()
        })
      },
      getProportionData() {
        console.log("mounted:" + this.data0);
        let _this = this;
        var sourceList = [
          { value: this.data0, name: '商品住宅' },
          { value: this.data1, name: '房改房' },
          { value: this.data2, name: '经适房' },
          { value: this.data3, name: '集资房' },
          { value: this.data4, name: '保障性住房' },
          { value: this.data5, name: '小产权房' }
        ]
        this.gatheringSourceOption.series[0].data = sourceList
        this.eChartsInit('home_gathering_source', 'light', this.gatheringSourceOption)
      },
      getTypeNum(type) {
        houseType(type).then(res => {
          if (type === "0") {
            this.data0 = res.data
          } else if (type === "1") {
            this.data1 = res.data
          } else if (type === "2") {
            this.data2 = res.data
          } else if (type === "3") {
            this.data3 = res.data
          } else if (type === "4") {
            this.data4 = res.data
          } else if (type === "5") {
            this.data5 = res.data
            console.log("getTypeNum:" + type)
            //收款的饼图的数据
            this.getProportionData()
          }
        }
        )
      }
    }
  };
</script>
<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .divBox {
    display: flex;
    height: 700px;
  }

  .left {
    float: left;
    width: 500px;
    height: 100%;
  }

  .content {
    width: calc(100% - 400px);
    height: 100%;
  }

  #testEchart {
    width: 400px;
    height: 240px;
    margin-left: 0px;
  }

  .bm-view {
    width: 950px;
    height: 100%;
  }

  .home-index-box {
    border-radius: 5px;
    border-style: solid;
    border-color: #eaecf0;
  }
</style>